<template>
	<div class="set-live-form">
		<el-col :span="20" :xs="24" class="set-live-content">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<div class="container">
						<el-form inline size="small" :model="setLiveFrom" ref="setLiveFrom" :label-position="labelPosition"
							label-width="120px">
							<el-row>
								<div class="form-title">全局设置</div>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="超低延时设置：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">开启超低延时直播设置后，直播间延时时最低可降至1s内</span>
										<span class="hint-text-detail cursor-btn">查看详情</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="消息气泡：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">开启后，学员进入、分享直播间与购买商品将在互动区展示相应的旗袍消息</span>
										<span class="hint-text-detail cursor-btn">查看详情</span>
										<div class="set-radio">
											<el-radio-group v-model="radio">
												<el-radio :label="3">所有直播模式</el-radio>
												<el-radio :label="6">仅横屏、录播与语言直播</el-radio>
												<el-radio :label="3">仅竖屏直播</el-radio>
											</el-radio-group>
										</div>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="全屏互动：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">开启后，学员可到鹅直播小程序参与全屏互动，观看体验更好</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="水印设置：">
										<!-- <el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
												style="width: 50px;"></el-switch> -->
										<div>已隐藏</div>
										<span class="hint-text">水印设置开启后会在视频直播中显示</span>
										<span class="hint-text-detail cursor-btn">立即前往 ></span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="严禁词设置：">
										<p>当前仅支持直播评论区严禁词屏蔽，需要前往配置页面进行严禁词添加</p>
										<span class="hint-text">路径：设置——店铺设置——功能设置——严禁词设置</span>
										<span class="hint-text-detail cursor-btn">立即前往 ></span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="打赏金额设置：">
										<span class="hint-text">点击修改打赏金额，最高为200元</span>
										<div>
											<el-input-number v-model="money" :min="0" :precision="2" :step="0.1"
												max="200" />&nbsp;&nbsp;&nbsp; 元
										</div>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="直播间公告：">
										<span class="hint-text">将应用与所有未单独设置过公告的直播间；可在【直播间详情——运营设置】进行单独设置</span>
										<div class="notice-content">
											<div class="notice-title">
												<div class="title">
													直播教学助手
												</div>
												<div class="cursor-btn">编辑</div>
											</div>
											<div>
												<p>欢迎进入直播间：</p>
												<p>1、请自行调节手机音量至合适的状态。</p>
												<p>2、直播页面显示讲师发布的内容，听众发言可以在讨论区进行或以弹幕形式查看。</p>
											</div>
										</div>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="讲师管理：">
										<span class="add-lecturer cursor-btn">+&nbsp;&nbsp;&nbsp;添加讲师</span>
										<span class="hint-text">被授权的讲师可在【<span class="cursor-btn">直播客户端</span>】创建直播</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="学员暂停直播：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">开启后，学院在直播中可以暂停观看直播</span>
										<span class="hint-text-detail cursor-btn">查看适用范围</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="卡片悬浮展示：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">开启后，横屏直播间讲解发送商品、推荐卡片、优惠券时，卡片悬浮显示在讨论区上方</span>
										<span class="hint-text-detail cursor-btn">查看示例</span>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<div class="form-title">默认设置</div>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="观看人次：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">新建直播间默认展示观看人次</span>
										<div class="set-radio">
											<el-radio-group v-model="radio">
												<el-radio :label="3">对所有人可见</el-radio>
												<el-radio :label="6">仅对讲师可见</el-radio>
											</el-radio-group>
										</div>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="在线人数：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">新建直播间默认展示在线人数</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="防录屏跑马灯：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">新建直播间默认开启防盗录跑马灯</span>
										<span class="hint-text-detail cursor-btn">前往设置 ></span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="评论审核：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">新建直播间默认开启评论审核</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="直播热度：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">新建直播间默认展开热度</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="点赞：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">新建直播间默认展示点赞功能</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="打赏：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">新建直播间默认展示打赏功能</span>
										<div class="set-radio">
											<el-radio-group v-model="radio">
												<el-radio :label="3">对所有人可见</el-radio>
												<el-radio :label="6">仅对讲师和打赏者可见</el-radio>
											</el-radio-group>
										</div>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="学员上墙讨论：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">新建直播间学院发言消息默认在互动区展示</span>
										<span class="hint-text-detail cursor-btn">查看示例</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="回放设置：">
										<el-switch v-model="setLiveFrom.isReward" active-value="1" inactive-value="0"
											style="width: 50px;"></el-switch>
										<span class="hint-text">新建直播间默认开启回放</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
									<el-form-item label="倍速播放/快进：">
										<el-radio-group v-model="radio">
											<el-radio :label="3">允许 <span class="hint-text">用户可以倍速播放与自由拖动进度条</span></el-radio>
											<el-radio :label="6">禁止 <span class="hint-text">课程未学完时，禁止倍速播放与拖动进度条</span></el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</div>
			</el-card>
		</el-col>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'left',
				setLiveFrom: {

				},
				radio: null,
				money: 0,
			}
		},
	}
</script>

<style scoped lang="scss">
	.cursor-btn {
		color: #3e8fff;
		cursor: pointer;
	}

	.set-live-content {
		float: right;
	}

	.form-title {
		font-size: 18px;
		color: #606266;
		font-weight: bold;
		margin-bottom: 18px;
		padding-left: 8px;
		line-height: 16px;
		border-left: 5px solid #3e8fff;
	}

	.container .hint-text {
		color: #ccc;
	}

	.container .hint-text-detail {
		margin-left: 8px;
	}

	.notice-content {
		width: 400px;
		background-color: #F5F5F5;
		padding: 20px;
		display: flex;
		flex-direction: column;
		color: #606266;
	}

	.notice-title {
		display: flex;
		justify-content: space-between;
	}

	.set-radio {
		padding: 5px;
		background-color: #F5F5F5;
	}

	.add-lecturer {
		padding: 5px 15px;
		border: 1px dashed #3e8fff;
	}
</style>